<template>
  <footer 
    class="chat-footer" 
    v-show="show && navs.length">
    <ul>
      <router-link
        v-for="item in navs" 
        :key="item.name" 
        :class="{active:item.active}"
        :to="item.route.path"
        tag="li">
        <badge :number="item.number" v-show="item.number"></badge>
        <i 
          class="iconfont" 
          :class="`icon-${item.icon}`"></i>
        <label for="">{{ item.text }}</label>
      </router-link>
    </ul>
  </footer>
</template>

<script>
import { mapState } from 'vuex';

// custom components
import Badge from '../Badge';

export default {
  name: 'chat-footer',
  components: {
    Badge
  },
  computed: {
    ...mapState('chat/bottomNavigator', [
      'show',
      'navs'
    ])
  }
};
</script>

<style lang="scss" scoped>
@import '../../assets/style/config';
@import '../../assets/style/mixins/common';
.chat-footer {
  background: $write-color;
  padding: .6rem 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top:1px solid $border-color-base;
  ul {
    @include disBox();
    li {
      @include flex1-1();
      position: relative;
      text-align: center;
      line-height: 1.4;
      i,
      label {
        display: block;
        font-size: 1.1rem;
      }
      em{
        font-size:1.2rem;
        position: absolute;
        color:$write-color;
        background:$color;
        height:1.6rem;
        line-height:1.6rem;
        min-width:1.6rem;
        padding:0 .2rem;
        border-radius: 9999px;
        text-align: center;
      }
      i {
        font-size: 1.9rem;
      }
      &.active {
        color: $color;
      }
    }
  }
}
</style>


